<template>
  <div class="notification-container">
    <TransitionGroup name="notification">
      <div v-for="notice in notifications"
           :key="notice.id" 
           class="notification-item">
        <div class="notification-item-div">
          <div class="notification-content">
            <div class="notification-icon" v-if="notice.type">
              <img :src="getIconByType(notice.type)" alt="">
            </div>
            <div class="notification-message">{{ notice.message }}</div>
          </div>
        </div>
      </div>
    </TransitionGroup>
  </div>
</template>

<script>
export default {
  name: 'NotificationComponent',
  data() {
    return {
      notifications: []
    }
  },
  methods: {
    getIconByType(type) {
      const icons = {
        success: require('@/assets/images/system/notification/success.png'),
        error: require('@/assets/images/system/notification/error.png'),
        warning: require('@/assets/images/system/notification/error.png'),
        info: require('@/assets/images/system/notification/success.png'),
      }
      return icons[type] || icons.info
    },
    
    show(message, type = 'info', duration = 3000) {
      const id = Date.now()
      this.notifications.push({ id, message, type })
      
      setTimeout(() => {
        this.notifications = this.notifications.filter(notice => notice.id !== id)
      }, duration)
    }
  }
}
</script>

<style scoped>
.notification-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
}

.notification-item {
  margin-bottom: 10px;
  border-radius: 15px;
  width: 300px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.notification-item-div {
  border-radius: 10px;
  overflow: hidden;
  height: 110%;
  width: 110%;
  padding: 12px 24px;
  //backdrop-filter: blur(30px);
  //background: rgba(255, 255, 255, 0.8);
  //box-shadow: inset 0 15px 30px 0 rgba(255, 255, 255, 0.2), inset 0 0 15px 0 rgba(255, 255, 255, 0.2), inset 0 1px 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 2px 0 rgba(255, 255, 255, 0.7);
}

.notification-content {
  display: flex;
  align-items: center;
}

.notification-icon {
  display: flex;
  margin-right: 12px;
}

.notification-icon img {
  width: 20px;
  height: 20px;
}

.notification-message {
  font-size: 14px;
  color: #333;
}

/* 类型样式 */
.success {
  border-left: 4px solid #52c41a;
}

.error {
  border-left: 4px solid #ff4d4f;
}

.warning {
  border-left: 4px solid #faad14;
}

.info {
  border-left: 4px solid #1890ff;
}

/* 动画效果 */
.notification-enter-active,
.notification-leave-active {
  transition: all 0.3s ease;
}

.notification-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.notification-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>